<template>
  <div class="announcements">
    <el-card class="main-card">
      <template #header>
        <div class="card-header">
          <span>公告列表</span>
        </div>
      </template>

      <!-- 置顶公告 -->
      <el-card class="top-notice-card" v-if="topNotices.length > 0">
        <template #header>
          <div class="card-header">
            <el-icon><Bell /></el-icon>
            <span style="margin-left: 10px">置顶公告</span>
          </div>
        </template>
        <div
            v-for="notice in topNotices"
            :key="notice.id"
            class="top-notice-item"
            @click="viewNotice(notice)"
        >
          <el-icon color="#ffd700"><Star /></el-icon>
          <span class="top-notice-title">{{ notice.title }}</span>
          <span class="top-notice-time">{{ formatTime(notice.publishTime) }}</span>
        </div>
      </el-card>

      <!-- 公告列表 -->
      <el-table
          :data="notices"
          style="width: 100%; margin-top: 20px;"
          v-loading="loading"
      >
        <el-table-column prop="title" label="标题" min-width="200">
          <template #default="scope">
            <span
                :class="{'top-notice-tag': scope.row.isTop === 1}"
                @click="viewNotice(scope.row)"
                style="cursor: pointer;"
            >
              {{ scope.row.title }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="publishTime" label="发布时间" width="180" align="center">
          <template #default="scope">
            {{ formatTime(scope.row.publishTime) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          style="margin-top: 20px; text-align: center;"
      >
      </el-pagination>
    </el-card>

    <!-- 公告查看对话框 -->
    <el-dialog
        :title="viewNoticeData.title"
        v-model="viewDialogVisible"
        width="600px"
    >
      <div class="notice-content-view">
        <div class="notice-meta">
          <span>
            <el-icon><Timer /></el-icon>
            发布时间：{{ formatTime(viewNoticeData.publishTime) }}
          </span>
          <span v-if="viewNoticeData.isTop === 1" style="margin-left: 20px;">
            <el-icon color="#ffd700"><Star /></el-icon>
            置顶公告
          </span>
        </div>
        <div class="notice-content" v-html="viewNoticeData.content"></div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Bell, Star, Timer } from '@element-plus/icons-vue'
import { listNotices, listTopNotices } from '@/api/notice'

// 响应式数据
const loading = ref(false)
const notices = ref([])
const topNotices = ref([])
const viewDialogVisible = ref(false)
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const viewNoticeData = reactive({
  title: '',
  content: '',
  publishTime: '',
  isTop: 0
})

// 获取所有公告
const fetchNotices = async () => {
  loading.value = true
  try {
    const response = await listNotices()
    notices.value = response || []
    pageInfo.total = notices.value.length
  } catch (error) {
    ElMessage.error('获取公告列表失败')
  } finally {
    loading.value = false
  }
}

// 获取置顶公告
const fetchTopNotices = async () => {
  try {
    const response = await listTopNotices()
    topNotices.value = response || []
  } catch (error) {
    ElMessage.error('获取置顶公告失败')
  }
}

// 查看公告详情
const viewNotice = (notice) => {
  Object.assign(viewNoticeData, notice)
  viewDialogVisible.value = true
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
}

// 分页相关方法
const handleSizeChange = (val) => {
  pageInfo.pageSize = val
  fetchNotices()
}

const handleCurrentChange = (val) => {
  pageInfo.currentPage = val
  fetchNotices()
}

// 页面加载时获取数据
onMounted(() => {
  fetchNotices()
  fetchTopNotices()
})
</script>

<style scoped>
.announcements {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 100px);
}

.main-card {
  min-height: calc(100vh - 140px);
}

.top-notice-card {
  border: 1px solid #ffd700;
  background-color: #fff9e6;
}

.top-notice-item {
  padding: 10px 0;
  border-bottom: 1px dashed #ebeef5;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.top-notice-item:last-child {
  border-bottom: none;
}

.top-notice-title {
  margin: 0 15px;
  font-weight: 500;
  flex: 1;
}

.top-notice-time {
  color: #909399;
  font-size: 12px;
}

.top-notice-tag::before {
  content: "★ ";
  color: #ffd700;
}

.notice-content-view {
  line-height: 1.8;
}

.notice-meta {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  color: #606266;
  display: flex;
  align-items: center;
}

.notice-content {
  white-space: pre-wrap;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
